<script setup lang="ts">

</script>

<template>
  <div class="region">
    <div class="left">地区:</div>
    <div class="right">
      <ul>
        <li class="active">全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
        <li>全部</li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.region{
  color: #a9a7a7;
  margin-top: 10px;
  display: flex;
  .left{
    margin-right: 10px;
    width: 48px;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    li{
      margin-right: 10px;
      margin-bottom: 10px;
      &.active{
        color: #55a6fe;
      }
    }
    li:hover{
      color: #55a6fe;
      cursor: pointer;
    }
  }
}
</style>